<template>
	<view class="page">
		
			<view class="uni-list">
				
					<view class="uni-list-cell" v-for="(item, index) in items" :key="item.value">
						<view class="aount">
							<image class="imgRadio" :src="item.img" mode="widthFix"></image>
							<view>{{item.newbackname}}</view>
						</view>
						<view class="del" @click="() => delcard(item.bankcardnum)">
							删除
						</view>
					</view>
				
			</view>
			<button class="btn" @click="btn">新增</button>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: [{
						value: 'USA',
						name: '微信钱包',
						img:'../../static/icon_zhifubao.png',
						
					},
					{
						value: 'CHN',
						name: '中国工商银行储蓄卡(0379)',
						img:'../../static/yinlian.png'
					},
					{
						value: 'BRA',
						name: '中国建设银行储蓄卡(2586)',
						img:'../../static/yinlian.png'
					},
					
				],
			};
		},
		onLoad() {
			this.getWithdrawCardList()//卡号
		},
		methods:{
			btn(){
				uni.navigateTo({
					url:('/pages/index/addAccount')
				})
			},
			// 删除银行卡
			delcard(cardNum,event){
				console.log('删除卡号',cardNum,event)
				this.$api.post("my/delcard",{id:cardNum}).then(res =>{
					
					this.getWithdrawCardList()
				})
			},
			// 提现卡号列表
			getWithdrawCardList() {
				this.$api.get('my/getWithdrawCardList', { pagenum: 1 }).then((res) => {
					
					res.list.forEach((item,index) =>{
						// let lastfour = item.bankcardnum.slice(-4)
						let newbackname = item.bankname + '(' +item.bankcardnum.slice(-4) + ')'
						item.newbackname = newbackname
						console.log('卡号列表项111',item.newbackname,index)
					})
					this.items = res.list;
					console.log('卡号11', res, this.items);
				});
			},
		}
	}
</script>

<style lang="scss">
	.page{
		
		background: #F7F7F7;
	}
	
	// list
	.uni-list-cell{
		display: flex;
		justify-content: space-between;
		// height: 120rpx;
		// width: 750rpx;
		height: 93rpx;
		background: #FFFFFF;
		font-weight: 500;
		font-size: 29rpx;
		color: #333333;
		line-height: 93rpx;
		border-bottom: 1rpx solid #F7F7F7;
		padding-right: 43rpx;
	}
	.del{
		color: #999999;
	}
		.uni-list{
			margin: 32rpx 40rpx;
		}
		.account{
			width: 100%;
			text-align: center;
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
			line-height: 32rpx;
			margin-bottom: 50rpx;
		}
		.aount{
			display: flex;
			// justify-content: space-between;
		}
		.imgRadio{
			width: 47rpx;
			height: 47rpx;
			// margin-top: 24rpx;
			// margin-left: 47rpx;
			padding: 24rpx 20rpx 0 37rpx;
			// margin-right: 20rpx;
		}
		.btn{
			width: 697rpx;
			margin: 0 27rpx;
			height: 87rpx;
			background: #3681F3;
			border-radius: 13rpx;
			font-weight: bold;
			font-size: 29rpx;
			color: #FFFFFF;
			position: fixed;
			bottom: 70rpx;
		}
</style>
